<template>
    <div class="card-page">
        <back title="我的卡劵"></back>
        <div class="card-content">
            <div class="card-tab">
                <div class="tab-item" :class="{active:activeindex == 1}" @click="activeindex = 1"><span>未使用</span></div>
                <div class="tab-item" :class="{active:activeindex == 2}" @click="activeindex = 2"><span>已使用</span></div>
            </div>
            <div class="card-list">
                <nodata v-if="cardlist.length < 1" title="暂无卡卷"></nodata>
                <div v-else class="item" v-for="(item,index) in cardlist" :key="index" ref="scrollbox">
                    <div class="left">
                        <strong>¥{{parseInt(item.card_value)}}</strong>
                        <p>手续费满{{parseInt(item.card_use_min_money)}}使用</p>
                    </div>
                    <div class="right">
                        <div class="card_no">卡劵号：<span>{{item.card_no}}</span></div>
                        <div class="card_type">卡劵类型：<span>{{item.card_type}}</span></div>
                        <div class="card_time">时间：<span>{{item.create_time}} - {{item.expired_time || '永久'}}</span></div>
                        <div class="card_status">状态：<span>{{item.status}}</span></div>
                    </div>
                </div>
                <more v-if="ordermore > 19" @click.native="morefn"></more>
            </div>
        </div>
    </div>  
</template>

<style lang="stylus">
.card-page{
    padding-top 50px
    height 100%
    background #f4f4f4
    position relative
    .card-content{
        height 100%
        .card-tab{
            width 100%
            height 50px
            font-size 16px
            line-height 50px
            display flex
            background-image: linear-gradient(to bottom, #48b5e4, #3555db)
            text-align center
            color #cfcfcf
            .tab-item{
                flex 1
                &.active{
                    color #fff
                    background-image linear-gradient(to bottom, #46a6e2, #1359b6)
                }
                
            }
        }
    }
    .card-list{
        height calc(100% - 50px)
        overflow-y auto
        padding 10px
        .item{
            display flex
            background #fff
            margin-bottom 10px
            .left{
                min-width 120px
                padding 20px 0
                background linear-gradient(to right, #4892e4, #3555db)
                color #fff
                text-align center
                strong{
                    font-size 30px
                    margin-bottom 10px
                    display block
                }
                p{
                    font-size 12px
                    width 100%
                }
            }
            .right{
                padding 10px
                position relative
                flex 2
                font-size 14px
                line-height 20px
                .card_type,.card_no{
                    font-size 14px
                    span{
                        color #000
                    }
                }
                .card_time{
                    font-size 12px
                    span{
                        color #555
                    }
                }
                .card_status{
                    font-size 12px
                    span{
                        color #3555db
                    }
                }
            }
        }
    }
}
</style>

<script>
export default {
    data(){
        return {
            cardlist:[],
            page:0,
            ordermore:0,
            activeindex:1,
        }
    },
    created(){
        this.mycards('new')
    },
    watch:{
        activeindex(val){
            this.page = 0
            this.cardlist = []
            this.ordermore = []
            if(val == 1){
                this.mycards('new')
            }else{
               this.mycards('used')
            }
        }
    },
    methods:{
        morefn(){
            if(this.activeindex == 1){
                this.mycards('new');
            }else{
                this.mycards('used');
            }
        },
        mycards(type){
            let toast = this.$createToast({
                time: 0,
                txt: '加载中...'
            }).show()
            this.page ++ 
            this.$http.get(`/MyInfo/myCards`,{
                page:1,
                status:type
            }).then( res =>{
                console.log(res)
                toast.hide()
                if(res.code == 200){
                    let list = res.data.Cards
                    this.cardlist = this.cardlist.concat(list)
                    this.ordermore = list.length
                }
            })
        },
        createToast(txt,type){
            this.$createToast({
                txt: txt,
                time:2000,
                type:type
            }).show()
        }
    }
}
</script>
